<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">    
    </head>
    <body>
        <h1 >
             <a id="Jump"></a>              <!--下面代码链接跳跃到的部分-->
            这是图像和链接的使用例程
        </h1>

        <p>这是图片和链接分开</p>
        <a href="https://www.baidu.com">百度</a>
        
        <p>这是图片和链接合并</p>
        <a href="https://www.baidu.com"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1966255252,3901175009&fm=27&gp=0.jpg"/></a><br/>
    
        <p>在图片无法显示时显示"龟"</p>
        <img src="https://ss1.bdstat" alt="龟"/>

        <p>鼠标移至图片时显示"龟"</p>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1966255252,3901175009&fm=27&gp=0.jpg" title="龟"/>

        <p>一张图片多个链接</p>
        <img src="http://www.runoob.com/try/demo_source/planets.gif" alt="行星" usemap="plant"/>
        <map name="plant">
            <area shape="rect" coords="0,0,82,126" alt="sun" href="http://www.runoob.com/images/sun.gif"/>
            <area shape="circle" coords="90,58,3" alt="mercury" href="http://www.runoob.com/try/demo_source/mercur.htm"/>
            <area shape="circle" coords="124,58,8" alt="venus" href="http://www.runoob.com/try/demo_source/venus.htm"/>
        </map>

        <p>这是个动图</p>
        <img src="http://www.runoob.com/try/demo_source/hackanm.gif" alt="bug" title="write"/>

        <p>图片在文字的左右  </p>
        <p>000
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1966255252,3901175009&fm=27&gp=0.jpg" style="float: left; " width="20px" height="10px"/>
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1966255252,3901175009&fm=27&gp=0.jpg"  width="20px" height="10px"/>
        </p>
    
        <p>链接的打开方式</p>
        <a href="https://www.baidu.com" target="_blank">新标签页打开百度</a>
        <br/>
        <a href="https://www.baidu.com" target="_blank">原标签页打开百度</a>

        <p>跳转到HTML的某个位置</p>
        <a href="#Jump">跳跃</a>

    
    </body>
</html>